<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./CSS/main.css">
    <title>谢少辉的个人简历</title>
  </head>
  <body>
    <div class="topNavBar clearfix">
      <a href="#" class="logo" alt="logo">
        <span class="rs">RS</span><span class="topNavBar_card">card</span>
      </a>
      <nav >
        <ul class="clearfix">
          <li><a href="#">关于</a></li>
          <li><a href="#">技能</a></li>
          <li><a href="#">作品</a></li>
          <li><a href="#">博客</a></li>
          <li><a href="#">日历</a></li>
          <li><a href="#">联系方式</a></li>
          <li><a href="#">其他</a></li>
        </ul>
      </nav>
    </div>
    <div class="banner" style="background-image: url(#)"></div>
    <main>
      <div class="card">
        <div class="pictureAndText">
          <div class="picture">
             <img src="" alt="头像">
          </div>
          <div class="text">
            <div class="profile">
              <span class="welcome">HELLO</span>
              <h1>谢少辉</h1>
              <p>前端开发工程师</p>
              <hr />
              <dl>
                <dt>年龄</dt>
                <dd>18</dd>
                <dt>所在城市</dt>
                <dd>广元</dd>
                <dt>邮箱</dt>
                <dd>huiboxes@gmail.com</dd>
                <dt>手机</dt>
                <dd>18381953871</dd>
              </dl>
            </div>
          </div>
        <footer class="media">
          <a href="#"><img src="#" alt=".."/></a>
          <a href="#"><img src="#" alt=".."/></a>
          <a href="#"><img src="#" alt=".."/></a>
          <a href="#"><img src="#" alt=".."/></a>
          <a href="#"><img src="#" alt=".."/></a>
          <a href="#"><img src="#" alt=".."/></a>
          <a href="#"><img src="#" alt=".."/></a>
        </footer>
      </div>
      <a href="#" class="button">下载PDF简历</a>
      <p>
        谢少辉，前端开发爱好者，就读于四川信息职业技术学院<br>
        技能：前端开发，Rails开发，Node.js开发
      </p>
    </main>
    <section>
      <h2>技能</h2>
      <ol>
        <li>HTML 5 &amp; CSS 3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue</li>
        <li>React</li>
        <li>HTTP</li>
      </ol>
    </section>
    <section>
      <h2>作品集</h2>
      <nav>
        <ol>
          <li>所有</li>
          <li>框架</li>
          <li>原生JS&amp;CSS</li>
        </ol>
      </nav>
      <div class="jobs">
        <div class="big"></div>
        <div class="small"></div>
        <div class="small"></div>
      </div>
    </section>
  </body>
</html>
